<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="0"
    >
      <div class="shop">
        <div
          class="goods"
          @click="getDetail(el.id)"
          v-for=" (el, index) in list"
          :key="index"
        >
          <div class="img">
            <img v-lazy="el.img_url" />
          </div>
          <h2>{{el.title}}</h2>
          <div class="bottom">
            <div class="price">
              <span>现价{{el.market_price}}</span>
              <span>原价{{el.sell_price}}</span>
            </div>
            <div class="detail van-ellipsis">{{el.zhaiyao}}</div>
            <div class="sell">
              <span>热卖中</span>
              <span>剩余{{el.stock_quantity}}件</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import { getgoods } from '../../../../api/home'
export default {
  data: () => ({
    list: [],
    loading: false,
    finished: false,
    pageindex: 1,
    limit: 6,
    count: 0
  }),
  methods: {
    async getgoods() {
      // ++this.pageindex
      const res = await getgoods({ pageindex: this.pageindex, limit: this.limit })
      this.list = this.list.concat(res.data.message)
      this.count = res.data.count
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(async () => {
        await this.getgoods()
        this.loading = false
        // 数据全部加载完成
        if (this.list.length >= this.count) {
          this.finished = true
        }
      }, 1000)
    },
    getDetail(id) {
      this.$router.push('/home/goodslist/' + id)
    }
  }
}
</script>
<style lang="less" >
.shop {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  font-family: "楷体";
  .goods {
    border: 1px solid lightgray;
    width: 42%;
    padding: 4px;
    margin-top: 5px;
    .img {
      display: flex;
      justify-content: center;
    }
    h2 {
      font-size: 14px;
      text-align: center;
    }
    img {
      width: 50%;
    }
    .price {
      display: flex;
      justify-content: space-around;
      span:nth-child(1) {
        color: red;
      }
      span:nth-child(2) {
        text-decoration: line-through;
      }
    }
    .detail {
      font-size: 12px;
      font-family: "楷体";
    }
    .sell {
      display: flex;
      justify-content: space-around;
      span:nth-child(1) {
        font-weight: bold;
        color: red;
      }
      span:nth-child(2) {
        color: skyblue;
      }
    }
  }
}
</style>